Array of column group objects.

<div class="definition">
    Array, default = []
</div>

You can use this property to organize columns in groups. If you change <span class="argument">.columnGroups</span> property
during run-time, you will need to call <a class="argument" href="w2grid.refresh">.refresh()</a> method to refresh the grid.
<div style="height: 10px"></div>

Column groups can be defined during object creation:

<textarea class="javascript">
let grid = new w2grid({
    name : 'grid',
    columnGroups : [
        { span: 1, text: '', main: true },
        { span: 2, text: 'Name' },
        { span: 1, text: '', main: true },
        { span: 2, text: 'Dates' }
    ],
    columns : [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ]
});
</textarea>

Or any time after the grid has been created:

<textarea class="javascript">
grid.columnGroups = [
    { span: 1, text: '', main: true },
    { span: 2, text: 'Name' },
    { span: 1, text: '', main: true },
    { span: 2, text: 'Dates' }
];
grid.refresh();
</textarea>

Column groups object is of following structure:
<textarea class="javascript">
columnGroups = {
    span : 1,     // number of columns to span
    text : '',    // caption of the group (can be a function)
    main : false  // indicates if column group header is merged with column header
}
</textarea>